import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native';
import axios from 'axios'

import Cart from './Cart'
import GoodsList from './GoodsList';
import TypeList from './TypeList'

// const typeList = [{ name: 'New', id: 1 }, { name: 'Rice Noodles', id: 2 }, { name: 'Bubble Tea', id: 3 }]
// const goodsList = [
//     {
//         name: 'New',
//         id: 1,
//         data: [{ id: 11, name: 'Pizza', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] },
//         { id: 12, name: 'Pizza2', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] },
//         {
//             id: 13, name: 'Pizza2', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [
//                 { id: 1, name: '温度', max: 1, data: [{ id: 1, name: '热', price: 0 }, { id: 2, name: '冷', price: 0 }] },
//                 { id: 2, name: '配料', max: 3, data: [{ id: 3, name: '仙草冻', price: 1 }, { id: 4, name: '布丁', price: 1.5 }, { id: 5, name: '荔枝椰果', price: 2 }, { id: 6, name: '草莓', price: 1 }] },
//                 { id: 3, name: '规格', max: 1, data: [{ id: 7, name: '500ml', price: 0 }, { id: 8, name: '700ml', price: 1 }] }
//             ]
//         }
//         ],

//     },
//     {
//         name: 'Rice Noodles',
//         id: 2,
//         data: [{ id: 21, name: 'Pizza', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] },
//         { id: 22, name: 'Pizza2', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] }],
//     },
//     {
//         id: 3,
//         name: 'Bubble Tea',
//         data: [{ id: 31, name: 'Pizza', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] },
//         { id: 32, name: 'Pizza2', url: 'https://reactnative.dev/img/tiny_logo.png', price: 10, skuList: [] }],
//     }
// ];
const List = () => {
    const [typeId, setTypeId] = useState(0)
    const [shopList, setShopList] = useState(() => {
        return []
    })
    const [goodsList, setGoodsList] = useState([])
    const [typeList, setTypeList] = useState([])
    const handleTypeChange = (typeId) => {
        setTypeId(typeId)
    }
    const handleShopListChange = (id, count, price) => {
        let index = shopList.findIndex(item => item.id === id)
        if (index === -1) {
            shopList.push({ id, count, price })
        } else {
            shopList[index].count += count
            if (shopList[index].count <= 0) {
                shopList.splice(index, 1)
            }
        }
        setShopList(shopList.map(item => item))
    }
    const computeCount = () => {
        let count = 0
        shopList.forEach(item => count += item.count)
        return count
    }
    const computeSum = () => {
        let sum = 0
        shopList.forEach(item => {
            sum += item.count * item.price
            if (item.skuList) {
                item.skuList.forEach(item => sum += item.price)
            }
        })
        return sum
    }
    const handleSkuAdd = (item, skuList) => {
        shopList.push({ id: item.id, count: 1, price: item.price, skuList: skuList })
        setShopList([...shopList])
    }

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'http://52.62.114.108/goodsList',
            )
            let goodsList = result.data
            setGoodsList(goodsList)
            setTypeList(goodsList.map(item => ({name: item.name, id: item.id})))
        }
        fetchData()
    }, []);
    useEffect(() => {
        if(typeList.length != 0){
            setTypeId(typeList[0].id)
        }
    }, [typeList])
    return (
        <>
            <View style={{ flex: 1, flexDirection: 'row', backgroundColor: '#fff' }}>
                {typeList.length !== 0 ? <TypeList typeList={typeList} handleTypeChange={handleTypeChange} /> : <></>}
                {goodsList.length !== 0 ? <GoodsList handleSkuAdd={handleSkuAdd} handleShopListChange={handleShopListChange} shopList={shopList} typeId={typeId} goodsList={goodsList} /> : <></>}
            </View>
            <Cart count={computeCount()} discount={0.8} sum={computeSum()} />
        </>
    );
}
export default List